<template>
  <el-tabs v-model="activeName" type="card" class="box-card">
    <el-tab-pane label="根据会议需求预约" name="1">
      <Divider orientation="left">
        填写会议需求
      </Divider>
      <need />
    </el-tab-pane>
    <el-tab-pane label="根据会议室预约" name="2">
      <Divider orientation="left">
        填写会议基本信息
      </Divider>
      <room />
    </el-tab-pane>
    <el-tab-pane label="blank" name="3" disabled />
  </el-tabs>
</template>

<script>
import Room from './Room'
import Need from './Need'
import { Divider } from 'iview'

export default {
  components: { Divider, Room, Need },
  data() {
    return {
      activeName: '1'
    }
  }

}
</script>

<style scoped>
.ivu-divider {
  font-size: 20px;
  font-weight: 400;
  margin-top: 1em;
  padding-left: 2em;
  padding-right: 2em;
}

.ivu-divider:before,
.ivu-divider:after {
  border-top-color: #F3AC8E;
}

.box-card {
  margin: 0 auto;
  width: 80%;
  background-color: rgba(0, 0, 0, 0);
  /* opacity: 0; */
  display: flex;
  flex-direction: column;
  height: 80%;
}

.el-tabs--card >>> .el-tabs__header {
  background-color: inherit;
  margin: 0;
}

.el-tabs--card >>> .el-tabs__content {
  border: 3px solid #EF8558;
  border-top: none;
  padding: 15px 0 0;
  background-color: #faf9f8;
  opacity: .95;
}

.el-tabs--card >>> .el-tabs__header .el-tabs__item.is-active {
  background-color: #faf9f8;
  opacity: .95;
}

.el-tabs--card >>> .el-tabs__header .el-tabs__nav {
  width: 100%;
  border: none;
  border-left: 3px solid #EF8558;
}

.el-tabs--card >>> .el-tabs__header .el-tabs__nav div:first-child {
  width: 20%;
  background-color: #EF8558;
  border-top: 3px solid #EF8558;
  padding-bottom: 40px;
}
.el-tabs--card >>> .el-tabs__header .el-tabs__nav div:nth-child(2) {
  width: 20%;
  background-color: #EF8558;
  border-top: 3px solid #EF8558;
  border-left: 3px solid #EF8558;
  border-left: 3px solid #EF8558;
  padding-bottom: 40px;
  /* border-bottom: 3px solid #faf9f8; */
}

.el-tabs--card >>> .el-tabs__header .el-tabs__nav div:last-child {
  width: 60%;
  background-color: inherit;
  border: 3px solid rgba(0, 0, 0, 0);
  border-bottom: 3px solid #EF8558;
  border-left: 3px solid #EF8558;
  color: rgba(0, 0, 0, 0);
  padding-bottom: 37px;
  /* opacity: 0; */
}

.el-tabs--card >>> .el-tabs__header .el-tabs__item {
  color: #fff;
  font-size: 21px;
  border-bottom: none;
}

.el-tabs--card >>> .el-tabs__header .el-tabs__nav .el-tabs__item.is-active {
  color: #EF8558;
  background-color: #faf9f8;
  opacity: .95;
  /* border-bottom: 3px solid rgba(0, 0, 0, 0); */
}

.el-tabs >>> .el-tabs__content {
  height: 100%;
}

.el-tabs >>> .el-tab-pane {
  height: 95%;
}

</style>
